<template>
    <div class="salarydetail">
        <div class="collepse_area" v-if="salaryinfo!=null">
            <div class="ca_tt">
                {{datevalue}} 出车费汇总
            </div>
            <div class="select_ct bdt">
                <p class="selector_title">时间:</p><p class="selector_value">{{salaryinfo.dateOfPlan||'暂无数据'}}</p>
            </div>
            <div class="select_ct bdt">
                <p class="selector_title">提还:</p><p class="selector_value">{{salaryinfo.placeOfGet||'暂无'}} <span class="divider">-</span> {{salaryinfo.placeOfLoadArea||'暂无'}} <span class="divider">/</span> {{salaryinfo.placeOfLoad||'暂无'}}<span class="divider">-</span>{{salaryinfo.placeOfBack||'暂无'}}</p>
            </div>
            <div class="select_ct bdt">
                <p class="selector_title">柜号:</p><p class="selector_value">{{salaryinfo.ctnr||'暂无'}} <span class="divider" v-if="salaryinfo.isLoading==1">/</span> <span v-if="salaryinfo.isLoading==1"><span class="smw">入闸重量</span>: {{salaryinfo.eportweight||'暂无'}}</span></p>
            </div>
            <div class="select_ct bdt">
                <p class="selector_title">费用汇总:</p><p class="selector_value redc">￥{{totalsalary}}</p>
            </div>
            <template v-for="(sa,index) in detaillist">
                <div class="select_ct bdt" v-if="sa.value>0" :key="index">
                    <p class="selector_title">{{sa.name}}:</p><p class="selector_value bluc">￥{{sa.value||0}}</p>
                </div>
            </template>
<!--            <div class="select_ct bdt">
                <p class="selector_title">装货区域:</p><p class="selector_value">{{salaryinfo.placeOfLoadArea||'暂无数据'}}</p>
            </div>
            <div class="select_ct bdt">
                <p class="selector_title">装货地点:</p><p class="selector_value">{{salaryinfo.placeOfLoad||'暂无数据'}}</p>
            </div>
            <div class="select_ct bdt">
                <p class="selector_title">还柜地点:</p><p class="selector_value">{{salaryinfo.placeOfBack||'暂无数据'}}</p>
            </div> -->
            <!-- <div class="select_ct bdt">
                <p class="selector_title">装货:</p><p class="selector_value">{{salaryinfo.isLoading==1?'装货':'卸货'||'暂无数据'}}</p>
            </div> -->
            <!-- <div class="select_ct bdt">
                <p class="selector_title">重量:</p><p class="selector_value">{{salaryinfo.weight||'暂无数据'}}</p>
            </div> -->
            <!-- <div class="select_ct bdt">
                <p class="selector_title">入闸重量:</p><p class="selector_value">{{salaryinfo.eportweight||'暂无数据'}}</p>
            </div> -->
        </div>
        <div class="nodata" style="margin-top:100px;" v-else>
            <van-empty description="暂无相关数据" />
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "profile",
    components: {
        
    },
    props:['feeid','t_ctnrId'],
    data() {
        return {
            salaryinfo:null,
            detaillist:[
                {
                      key:"dispatchFee",
                      value:"",
                      name:'出车费'
                },
                {
                      key:"docFee",
                      value:"",
                      name:'拿单费'
                },
                {
                      key:"weighingFee",
                      value:"",
                      name:'过磅费'
                },
                {
                      key:"overWeightFee",
                      value:"",
                      name:'超重费'
                },
                {
                      key:"pickSurchargeFee",
                      value:"",
                      name:'异提费'
                },
                {
                      key:"twoPlaceFee",
                      value:"",
                      name:'两地费'
                },
                {
                      key:"expressFee",
                      value:"",
                      name:'高速费'
                },
                {
                      key:"overnightFee",
                      value:"",
                      name:'压夜费'
                },
                {
                      key:"overTimeFee",
                      value:"",
                      name:'超时费'
                },
                {
                      key:"repairFee",
                      value:"",
                      name:'维修费'
                },
                {
                      key:"parkFee",
                      value:"",
                      name:'停车费'
                },
                {
                      key:"twoCtnrsFee",
                      value:"",
                      name:'两柜补'
                },
                {
                      key:"detourFee",
                      value:"",
                      name:'绕路费'
                },
                {
                      key:"backFee",
                      value:"",
                      name:'还重费'
                },
                {
                      key:"selfCtnrFee",
                      value:"",
                      name:'自备柜补'
                },
                {
                      key:"holidayFee",
                      value:"",
                      name:'假日补'
                },
                {
                      key:"oilFee",
                      value:"",
                      name:'油补'
                }
            ],
        }
    },
    created() {
        if(this.feeid)
        {
            this.getsalaryinfo();
        }else if(this.t_ctnrId)
        {
            this.getsalaryByctnrid();
        }
    },
    computed:{
        totalsalary:function(){
            var count =0;
            this.detaillist.forEach((d)=>{
                var rcm = Number(d.value)*10000;
                count+=rcm;
            })
            return (count/10000).toFixed(2);
        }
    },
    methods:{
        getsalaryinfo:function(){
            if(!this.feeid)
            {
                this.$toast('参数异常');
                return;
            }
            var _this=this;
            var loading = this.$toast.loading({
                duration:60000,
                message:'查询中,请稍等······'
            });
            this.axios.post('/home/getTruckerSalary',{sid:this.feeid}).then((res)=>{
                loading.clear();
                if(res.errno==0)
                {
                    _this.salaryinfo=res.data;
                    _this.detaillist.forEach((d)=>{
                        d.value=res.data[d.key]||0;
                    })
                    _this.datevalue=res.data.dateOfPlan.substr(0,10);
                    _this.$emit('sett_ctnrId',res.data.ctnrId);
                }else{
                    _this.$toast(res.errmsg);
                }
            }).catch((err)=>{
                loading.clear();
            })
        },
        getsalaryByctnrid:function(){
            if(!this.t_ctnrId)
            {
                this.$toast('参数异常');
                return;
            }
            var _this=this;
            var loading = this.$toast.loading({
                duration:60000,
                message:'查询中,请稍等······'
            });
            this.axios.post('/home/getTruckerSalaryByCtnrid',{t_ctnrId:this.t_ctnrId}).then((res)=>{
                loading.clear();
                if(res.errno==0)
                {
                    _this.salaryinfo=res.data;
                    _this.detaillist.forEach((d)=>{
                        d.value=res.data[d.key]||0;
                    })
                    _this.datevalue=res.data.dateOfPlan.substr(0,10);
                }else{
                    _this.$toast(res.errmsg);
                }
            }).catch((err)=>{
                loading.clear();
            })
        }
    },
    mounted:function(){
        
    }
};
</script>

<style lang="less" scoped>
.salarydetail{
    height: 100%;
    min-height: calc(100vh - 50px);
    overflow: hidden;
    padding-bottom: 20px;
    background-color: #f5f5f5;
}
.datepicker{
    width: 100%;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    height: 50px;
    .van-field__control{
        text-align: center;
    }
}
.collepse_area{
    width: 100%;
    // margin-left: 2%;
    height: auto;
    background-color: #fff;
    // border-radius: 10px;
    overflow: hidden;
    .ca_tt{
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: left;
        text-indent: 10px;
        font-size: 14px;
        color: #1AA034;
        border-bottom: 1px solid #eee;
        .catt_rt{
            float: right;
            padding-right: 15px;
            span{
                color: #f0464e;
            }
        }
    }
    .vancollape{
        text-align: left;
        .van-cell{
            padding: 0px;
            color: #777;
            .van-icon{
                margin-top: 13px;
                margin-right: 10px;
            }
        }
    }
    .select_ct{
        background-color: #fff;
        padding: 10px 0;
        height: 50px;
        border-bottom: 1px solid #eee;
        text-align: left;
        p{
            display: inline-block;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #777;
        }
        .selector_title{
            float: left;
            margin-left: 10px;
            width: 2rem;
            text-align: justify;
            text-align-last: justify;
        }
        .special{
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .selector_value{
            height: 30px;
            line-height: 30px;
            text-align: left;
            margin-left: 20px;
            color: #5500ff;
            float: right;
            margin-right: .2rem;
            .smw{
                font-size: .3rem;
            }
        }
        .redc{
            color: #f0464e;
        }
        .bluc{
            color: #ff9828;
        }
        .detailcheck{
            float: right;
            padding-right: 8px;
        }
        .hightlight{
            color: #f0464e;
        }
        .vanicon{
            vertical-align: middle;
        }
        .divider{
            margin: 0 5px;
        }
    }
    .nobd{
        border: none;
    }
    .nopd{
        padding: 0;
        height: 34px;
    }
    .bdt{
        border-top: 1px solid #eee;
    }
}
.van-collapse-item__content{
    padding: 16px 8px;
}

.infodisplay{
    margin-top: 20px;
    width: 96%;
    margin-left: 2%;
    border: 1px solid #ccc;
    height: calc(100% - 150px);
    overflow: scroll;
    overflow-x: hidden;
    .info_item{
        font-size: 16px;
        color: #666;
        text-align: justify;
        line-height: 1.6;
        border-bottom: 1px solid #eee;
        overflow: hidden;
        position: relative;
        .title{
            width: 30%;
            overflow: hidden;
            text-align: center;
            position: absolute;
            top: 50%;
            font-size: 14px;
            color: #333;
            transform: translateY(-50%);
        }
        .content{
            width: 70%;
            padding: 10px;
            margin-left: 30%;
        }
        .clearfloat{
            clear: both;
        }
    }
    .nodata{
        text-align: center;
        font-size: 16px;
        margin-top: 50px;
        color: #999;
    }
}
.pagedivider{
    width: 100%;
    height: 40px;
    margin-top: 10px;
}
</style>
<style>
    .salarydetail .vansecwrap .van-cell{
        padding-left: 0;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .salarydetail .vansecwrap .van-icon-arrow{
        margin-top: 10px;
    }
</style>